function drawPieChart( values, colors ) {
  var canvas = document.getElementById("canvas");
  var normValues = normalizeValues( values );

  var lastAngle = STARTANGLE;
  var count = 0;

  var chart = document.createElementNS("http://www.w3.org/2000/svg", "g");
  canvas.appendChild( chart );

  var legend = document.createElementNS("http://www.w3.org/2000/svg", "g");
  canvas.appendChild( legend );

  for ( var i in values ) {
    addWedge( chart, 0, CENTERX, CENTERY, RX, RY,
	      lastAngle, lastAngle + 360*normValues[ i ], colors[count] );

    var label = createLabel( 50, (20+20*count), colors[ count ], i, values[ i ] );
    legend.appendChild( label );

    lastAngle += 360*normValues[i];
    count++;
  }

  chart.setAttribute( "transform", "scale(1,.8)" );
}

function normalizeValues( values ) {
  var total = 0;
  var ret = new Object();
  for ( var i in values ) {
    total += values[ i ];
  }
  for ( var i in values ) {
    ret[ i ] = values[ i ] / total;
  }
  return ret;
}

function addWedge( chart, phi, x, y, rx, ry, start, stop, color ) {
  var degPerRad = Math.PI/180.0;
  var e1x = rx*Math.cos((phi+start)*degPerRad);
  var e1y = rx*Math.sin((phi+start)*degPerRad);
  var e2x;
  var e2y;
  var e3x;
  var e3y;
  if ( stop - start < 180 ) {
    e2x = ry*Math.cos((phi+stop)*degPerRad);
    e2y = ry*Math.sin((phi+stop)*degPerRad);
    e3x = e2x;
    e3y = e2y;
  } else {
    e2x = ry*Math.cos((phi+180)*degPerRad);
    e2y = ry*Math.sin((phi+180)*degPerRad);
    e3x = ry*Math.cos((phi+stop)*degPerRad);
    e3y = ry*Math.sin((phi+stop)*degPerRad);
  }

  var wedge = document.createElementNS("http://www.w3.org/2000/svg", "path");
  wedge.setAttribute("class", "wedge");
  wedge.setAttribute("stroke", color);
  wedge.setAttribute("fill", color);
  wedge.setAttribute("fill-opacity", 1);
  wedge.setAttribute("d", "M" + x+","+y+" "+ (x+e1x) + "," + (y+e1y) +
		     "A" + rx + "," + ry + " " + phi + " 0,1 " + (x+e2x) + "," + (y+e2y) +
		     "A" + rx + "," + ry + " " + phi + " 0,1 " + (x+e3x) + "," + (y+e3y) +"z" );

  var dropLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
  dropLine.setAttribute("stroke", color);
  dropLine.setAttribute("stroke-width", 2);
  dropLine.setAttribute("fill", color);
  dropLine.setAttribute("fill-opacity", 0.7);
  if ( start < 180 ) {
    if ( stop >= 180 ) {
      e2x = ry*Math.cos((phi+180)*degPerRad);
      e2y = ry*Math.sin((phi+180)*degPerRad);
    }
    dropLine.setAttribute("d", "M" + (x+e1x) + "," + (y+e1y) +" "+ (x+e1x) + "," + (y+e1y+DROP) +
			  "A" + rx + "," + ry + " " + phi + " 0,1 " + (x+e2x) + "," + (y+e2y+DROP) +
			  "l" + "0,-" + DROP +"z" );
    chart.appendChild( dropLine );
  }
  chart.appendChild( wedge );
}

function createLabel( x, y, color, name, value ) {
  var label = document.createElementNS("http://www.w3.org/2000/svg", "g");
  var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
  var box = document.createElementNS("http://www.w3.org/2000/svg", "rect");

  box.setAttribute( "x", x );
  box.setAttribute( "y", y );
  box.setAttribute( "height", 20 );
  box.setAttribute( "width", 20 );
  box.setAttribute( "stroke", color );
  box.setAttribute( "fill", color );
  box.setAttribute( "fill-opacity", 1 );

  text.setAttribute( "x", x + 25 );
  text.setAttribute( "y", y + 12 );
  text.appendChild( document.createTextNode( name +", "+value ) );

  label.appendChild( box );
  label.appendChild( text );

  return label;
}
